<template>
   <el-dialog
      width="30%"
      title="新增/编辑商品"
      :visible.sync="outerVisible"
      append-to-body>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm">
          <el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格（单位：分）" prop="price" :rules="[{ required: true, message: '请输入商品价格', trigger: 'blur' }]">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" prop="imgUrl" :rules="[{ required: true, message: '请输入商品图片', trigger: 'blur' }]">
            <VabQiniuUpload :limit="1" ref="cerateUpload"  @onOk="urlOK"></VabQiniuUpload>
          </el-form-item>
        </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="goodsSubmit(ruleFormRef)">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
  import VabQiniuUpload from '@/components/VabQiniuUpload'
import store from '@/store'
import {merchantGoodsAdd,merchantGoodsEdit} from '@/api/merchant/goods_api.js'
export default {
  name: 'goodsAdd',
  components: {
      VabQiniuUpload
    },
  setup(props, { emit }) {
    const Interface = reactive({
      goodsOpen(shop,row){
        query.outerVisible = true
        query.shop = shop
        query.file = ''
        if(row == true){
          query.ruleForm.imgUrl = ''
          query.ruleForm.name = ''
          query.ruleForm.price = ''
          query.ruleForm.goodsId = ''
          nextTick(()=>{
            cerateUpload.value.loadImg()
          })
        }else{
          query.ruleForm.imgUrl = row.imgUrl
          query.ruleForm.name = row.name
          query.ruleForm.price = row.price
          query.ruleForm.goodsId = row.id
          nextTick(()=>{
            cerateUpload.value.loadImg(row)
          })
        }
      },
      urlOK(file){
        query.file = file
        query.ruleForm.imgUrl = file
      },
      async goodsSubmit(formEl){
        await formEl.validate(async(valid, fields) => {
           if(valid){
              if(query.file){
                const fileUrl = await store.dispatch('baseStore/setQiniuUpdate',query.file)
                query.ruleForm.imgUrl = fileUrl
              }
             query.ruleForm.shopId = query.shop.id
             query.ruleForm.price = parseFloat(query.ruleForm.price)
            const {code} = query.ruleForm.goodsId ? await merchantGoodsEdit(query.ruleForm) : await merchantGoodsAdd(query.ruleForm)
             if(code === 0){
               Message.success('操作成功')
              query.outerVisible = false
               emit('onOk')
             }
           }
        })
      }
    })
    const ruleFormRef = ref(null)
    const cerateUpload = ref(null)
    const query = reactive({
      outerVisible:false,
      shop:{},
      file:'',
      ruleForm:{
        name:'',
        imgUrl:'',
        price:'',
        goodsId:''
      }
    })
    return {
      ruleFormRef,
      cerateUpload,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>